{% extends "base.html" %}
{% block page_title %}Argus: Visitor Map{% endblock %}
{% block load_event %}onload="load()" onunload="GUnload()"{% endblock %}
{% block content %}
  <div id="featured-projects">
    <h4>Map of Visitors</h4>
    <img src='/static/mm_20_blue.png'>1~9 PV</img>
    <img src='/static/mm_20_purple.png'>10~99 PV</img>
    <img src='/static/mm_20_yellow.png'>100~999 PV</img>
    <img src='/static/mm_20_red.png'>1000+ PV</img>
    (from 2011-11-08 16:54:43)
    <div id="map" style="height: 600px"></div>
  </div><!--end featured-projects-->
  <div id="featured-projects">
    <h4>Daily Pageviews</h4>
    <div id="container" style="width: 100%"></div>
  </div><!--end featured-projects-->
{% endblock %}
{% block js_script %}
  <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=AIzaSyAwTA9Tlcau8rDVIZ_gAKHIrVakhCKfVfw" type="text/javascript"></script>
  <script type="text/javascript">
  function load() {
    if (GBrowserIsCompatible()) {
      function Point(lat,longi,html,icon) {
        this.gpoint = new GMarker(new GLatLng(lat,longi),icon);
        this.html = html;
      }
  
      function Map(id,points,lat,longi,zoom) {
        this.id = id;
        this.points = points;
        this.gmap = new GMap2(document.getElementById(this.id));
        this.gmap.setCenter(new GLatLng(lat, longi), zoom);
        this.markerlist = markerlist;
        this.addmarker = addmarker;
        this.array2points = array2points;
  
        function markerlist(array) {
           for (var i in array) {
              this.addmarker(array[i]);
           }
        }
  
        function array2points(map_points) {
          for (var i in map_points) {
            points[i] = new Point(map_points[i][0],map_points[i][1],map_points[i][2],map_points[i][3]);
          }
          return points;
        }
  
        function addmarker(point) {
          if (point.html) {
            // change click to mouseover or other mouse action
            GEvent.addListener(point.gpoint, "click", function() { 
                point.gpoint.openInfoWindowHtml(point.html);
            });
          }
          this.gmap.addOverlay(point.gpoint);
        }
  
        this.points = array2points(this.points);
        this.markerlist(this.points);
      }
  
      var icon1 = new GIcon();
      //https://sites.google.com/site/gmapicons/
      icon1.image = "/static/mm_20_blue.png";
      //icon1.shadow = "/static/mm_20_shadow.png";
      icon1.iconSize = new GSize(6, 10);
      //icon1.shadowSize = new GSize(22, 20);
      icon1.iconAnchor = new GPoint(3, 10);
      icon1.infoWindowAnchor = new GPoint(1, 1);
  
      var icon2 = new GIcon();
      icon2.image = "/static/mm_20_purple.png";
      icon2.iconSize = new GSize(12, 20);
      icon2.iconAnchor = new GPoint(6, 20);
      icon2.infoWindowAnchor = new GPoint(1, 1);
  
      var icon3 = new GIcon();
      icon3.image = "/static/mm_20_yellow.png";
      icon3.iconSize = new GSize(18, 30);
      icon3.iconAnchor = new GPoint(9, 30);
      icon3.infoWindowAnchor = new GPoint(1, 1);
  
      var icon4 = new GIcon();
      icon4.image = "/static/mm_20_red.png";
      icon4.iconSize = new GSize(24, 40);
      icon4.iconAnchor = new GPoint(12, 40);
      icon4.infoWindowAnchor = new GPoint(1, 1);
  
      map_points = [
        {% for c in citys %}{% if c.pageview %}[{{c.latitude}}, {{c.longitude}}, '{{c.name}}', icon{{c.pageview}}],{% endif %}{% endfor %}
      ];
      var map = new Map('map',map_points,35,150,2);
  
      map.gmap.addControl(new GMapTypeControl());
      map.gmap.addControl(new GSmallMapControl());
    }
  }
  </script>
  <script src="/static/jquery-latest.js"></script>
  <script type="text/javascript" src="/static/highcharts/highcharts.js"></script>
  <script type="text/javascript">
    var chart;
    $(document).ready(function() {
      chart = new Highcharts.Chart({
        chart: { renderTo: 'container', zoomType: 'x' },
        title: { text: 'Daily Pageviews' },
        xAxis: {
          title: { text: 'Date' },
          type: 'datetime'
        },
        yAxis: [{
          title: {
            text: '# Pageviews',
            //style: { color: '#AA4643' }
          },
          //type: 'logarithmic',
          //minorTickInterval: 'auto'
          type: 'linear',
          min: 0
        }],
        tooltip: {
          shared: true,
          crosshairs: true
        },
        plotOptions: {
          column: {
            minPointLength: 1,
            pointPadding: 0,
            groupPadding: 0,
            borderWidth: 0.1,
            shadow: false
          },
          spline: { marker: { enabled: false, } }
        },
        series: [{
          name: 'Pageviews',
          type: 'spline',
          //type: 'column',
          data: [
            {% for pv in dpvs %} [{{ pv.day }}*86400000, {{ pv.dpv }}], {% endfor %}
          ] 
        }]
      });
    });
  </script>
{% endblock %}
